<template>
  <div
    class="draggable-window"
    :style="windowStyles"
    ref="windowRef"
  >
    <!-- 标题栏（可拖动区域） -->
    <div
      class="handle"
      @mousedown="startDragging"
    >
      <span>{{ title }}</span>
      <div class="buttons-container">
        <button
          class="window-btn maximize-btn"
          @click="toggleMaximize"
          :title="isMaximized ? '恢复' : '最大化'"
        >
          <i class="fa" :class="isMaximized ? 'fa-compress' : 'fa-expand'"></i>
        </button>
        <button
          class="window-btn close-btn"
          @click="handleClose"
          title="关闭"
        >
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>

    <!-- 内容区域（插槽） -->
    <div class="content">
      <slot></slot>
    </div>

    <!-- 右下角缩放手柄 -->
    <div
      class="resize-handle"
      @mousedown="startResizing"
    ></div>
  </div>
</template>

<script>
export default {
  name: "DraggableWindow",
  props: {
    title: {
      type: String,
      default: '可交互窗口'
    },
    initialLeft: {
      type: Number,
      default: 25
    },
    initialTop: {
      type: Number,
      default: 25
    },
    initialWidth: {
      type: Number,
      default: 320
    },
    initialHeight: {
      type: Number,
      default: 240
    },
    minWidth: {
      type: Number,
      default: 200
    },
    minHeight: {
      type: Number,
      default: 150
    }
  },
  data() {
    return {
      windowStyles:{
        left: `${state.left}px`,
        top: `${state.top}px`,
        width: `${state.width}px`,
        height: `${state.height}px`,
        opacity: state.isClosing ? 0 : 1,
        transform: state.isClosing ? 'scale(0.9)' : 'translateZ(0)'
      },
      // 引用
      windowRef:null
    }
  },
  created() {

  },
  methods: {

// 处理窗口大小变化
    handleWindowResize(){
      state.windowWidth = window.innerWidth;
      state.windowHeight = window.innerHeight;

      if (state.isMaximized) {
        state.width = state.windowWidth;
        state.height = state.windowHeight;
      }
    },

// 拖动开始
    startDragging (e) {
      if (state.isMaximized) {
        toggleMaximize();
      }

      const rect = this.windowRef.value.getBoundingClientRect();
      state.offsetX = e.clientX - rect.left;
      state.offsetY = e.clientY - rect.top;
      state.isDragging = true;

      // 防止文本选择
      e.preventDefault();
    },

// 缩放开始
    startResizing  (e){
      if (state.isMaximized) {
        toggleMaximize();
      }

      const rect = this.windowRef.value.getBoundingClientRect();
      state.startX = e.clientX;
      state.startY = e.clientY;
      state.originalWidth = rect.width;
      state.originalHeight = rect.height;
      state.isResizing = true;

      // 防止文本选择
      e.preventDefault();
    },

// 处理鼠标移动
    handleMouseMove  (e)  {
      if (state.isDragging) {
        let newLeft = e.clientX - state.offsetX;
        let newTop = e.clientY - state.offsetY;

        // 边界检查
        newLeft = Math.max(0, Math.min(newLeft, state.windowWidth - state.width));
        newTop = Math.max(0, Math.min(newTop, state.windowHeight - state.height));

        // 更新位置
        state.left = newLeft;
        state.top = newTop;

        // 触发移动事件
        emit('move', { left: newLeft, top: newTop });
      }
      else if (state.isResizing) {
        const newWidth = state.originalWidth + (e.clientX - state.startX);
        const newHeight = state.originalHeight + (e.clientY - state.startY);

        // 最小尺寸检查
        if (newWidth >= props.minWidth) {
          state.width = newWidth;
        }

        if (newHeight >= props.minHeight) {
          state.height = newHeight;
        }

        // 触发缩放事件
        emit('resize', { width: state.width, height: state.height });
      }
    },

// 处理鼠标释放
    handleMouseUp  () {
      if (state.isDragging) {
        state.isDragging = false;
      }

      if (state.isResizing) {
        state.isResizing = false;
      }
    },

// 切换最大化/恢复
    toggleMaximize  () {
      if (!state.isMaximized) {
        // 保存当前状态
        const rect = this.windowRef.value.getBoundingClientRect();
        state.originalPosition = {
          left: rect.left,
          top: rect.top,
          width: rect.width,
          height: rect.height
        };

        // 最大化
        state.left = 0;
        state.top = 0;
        state.width = state.windowWidth;
        state.height = state.windowHeight;
      } else {
        // 恢复原始状态
        state.left = state.originalPosition.left;
        state.top = state.originalPosition.top;
        state.width = state.originalPosition.width;
        state.height = state.originalPosition.height;
      }

      state.isMaximized = !state.isMaximized;
      emit('maximize', state.isMaximized);
    },

// 处理关闭
     handleClose  ()  {
      state.isClosing = true;
      setTimeout(() => {
        emit('close');
      }, 300);
    },

// // 生命周期钩子
//     onMounted(() => {
//       // 添加事件监听
//       window.addEventListener('mousemove', handleMouseMove);
//       window.addEventListener('mouseup', handleMouseUp);
//       window.addEventListener('resize', handleWindowResize);
//     });
//
//     onUnmounted()  {
//       // 移除事件监听
//       window.removeEventListener('mousemove', handleMouseMove);
//       window.removeEventListener('mouseup', handleMouseUp);
//       window.removeEventListener('resize', handleWindowResize);
//     }
  },
  computed: {


  },
  filters: {

  }
}
</script>

<style scoped>
.draggable-window {
  position: absolute;
  background-color: white;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, width, height, left, top;
  transition: opacity 0.3s, transform 0.3s;
}

.handle {
  cursor: move;
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.handle:hover {
  background-color: #2563eb;
}

.buttons-container {
  display: flex;
  gap: 0.25rem;
}

.window-btn {
  color: white;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  transition: color 0.2s;
}

.maximize-btn:hover {
  color: #fef3c7;
}

.close-btn:hover {
  color: #fecaca;
}

.content {
  padding: 1rem;
  color: #374151;
  height: calc(100% - 42px);
  overflow: auto;
}

.resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.25rem;
  height: 1.25rem;
  cursor: se-resize;
  background-color: #e5e7eb;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: background-color 0.2s;
}

.resize-handle:hover {
  background-color: #d1d5db;
}
</style>

